<template>
  <div>
    <T_SorTable
      :data="tableData"
      :tableType="tableType"
      :page="page"
      max-height="545"
      :isDrag="{
        drag: 'column',
        get_new_data: getNewDataType
      }"
    >
      <template #address="row">
        <el-tag>{{ row.item[row.prop!] }}</el-tag>
      </template>
      <template #tag="row">
        <el-tag :type="row.item[row.prop!] === 'Home' ? '' : 'success'" disable-transitions>
          {{ row.item[row.prop!] }}
        </el-tag>
      </template>
      <template #header_action>
        {{ $t('common.operation') }}
      </template>
      <template #action="row">
        <el-button size="small" type="primary" @click="handleEdit(row.item)">
          {{ $t('common.tip') }}
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="$itemActionTip(() => handleDelete(row.item), 'error')"
        >
          {{ $t('common.delete') }}
        </el-button>
      </template>
    </T_SorTable>
    <T_Provider
      :total="tableData.length"
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
    ></T_Provider>
  </div>
</template>
<script lang="ts" setup name="ColumnSortTable">
import { tableType, tableData } from '../tableType'
import { page, handleEdit, handleDelete, getNewDataType } from '../methods'
</script>

<style scoped lang="scss"></style>
